<template>
  <div v-if="source" class="OctopusBoard">
    <div class="Content">
      <div class="HeadPanel">
        <div class="Title" @dblclick="openNewTab" :title="'当前高度：'+container.height">{{source.title}}</div>
      </div>
      <div class="BoardPanel">
        <!-- 构建布局 -->
        <table class="Layout">
          <tr>
            <td v-for="(layout,lname) in source.layout"
                v-bind:style="{width:layout.width?(layout.width*100)+'%':'100%'}" :id="'lo_' + lname">
              <!-- {{layout}} {{lname}} -->
              <template v-if="layout.container">
                <div class="SubContainer" v-for="(item,iname) in layout.container" :id="'lo_i_' + iname"
                     v-bind:style="{width:item.width?(item.width*100)+'%':'100%',height:getHeight(item.height||1)}">
                  <div class="BodyData">
                    <div class="Title" v-if="item.title">{{item.title}}</div>
                    <div class="DataPanel">&nbsp;</div>
                  </div>
                  <div class="Match Flex Col Between">
                    <div class="Flex Row W-Match Between">
                      <div class="Bugle1">&nbsp;</div>
                      <div class="Bugle2">&nbsp;</div>
                    </div>
                    <div class="Flex Row W-Match Between">
                      <div class="Bugle3">&nbsp;</div>
                      <div class="Bugle4">&nbsp;</div>
                    </div>
                  </div>
                </div>
              </template>
            </td>
          </tr>
        </table>
      </div>

      <div class="SlotPanel">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
  <div v-else>Octopus Framework Initialization Exception.</div>
</template>

<script>
  export default {
    name: 'DialogEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        // 容器参数
        container: {
          height: 0,
        },
      }
    },
    created: function () {
      this.octopus.tips.debug("DialogEngine执行了created事件。");
    },
    mounted: function () {
      let o = this;
      this.$nextTick(function () {
        o.init();
      });
      this.octopus.tips.debug("DialogEngine执行了mounted事件。");
    },
    activated: function () {
      // this.init();
      this.octopus.tips.debug("DialogEngine执行了activated事件。");
    },
    deactivated: function () {
      this.octopus.tips.debug("DialogEngine执行了deactivated事件。");
    },
    destroyed() {
    },
    computed: {
      // 可参考标准List控件。
    },
    methods: {
      init: function () {
        let o = this;

        setTimeout(function () {
          o.resize();
        }, 500);

        window.addEventListener("resize", () => {
          o.resize();
        });

        // alert(aaa + "," + bbb);
        $(".SubContainer").each(function (index, dom) {
          let containerID = $(dom).attr("id");
          let containerName = containerID.split('_')[2];
          // 转移DOM对象
          $(dom).find(".DataPanel").html($("#" + containerName));
        });
      },
      // 获取高度
      getHeight: function (value) {
        let realHeight = this.container.height * value;
        // 高度不能低于300，低于300不给予相应。
        // realHeight = realHeight > 220 ? 220 : realHeight;

        return (realHeight - 10) + 'px';
      },
      // 重定义大小。
      resize: function () {
        // https://blog.csdn.net/someoneyoulove/article/details/119204944
        // 获取屏幕浏览器可见区域的高度，减顶部 title 和自身 padding 的 10px。
        //this.container.height = window.screen.height - 36 - 10;
        this.container.height = document.body.clientHeight - 36 - 10;
      },
      openNewTab: function () {
        window.open(location.href, "_blank");
      }
    },
    watch: {
      // 可参考标准List控件。
    },
    props: ["source", "loaded", "created", "opened", "closed"]
  }
</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
